<template>
    <s-layout title="首页" class="page-index" :bgStyle="bgops" :navbarStyle="navbar" navbar="custom" tabbar="/pages/index/index" onShareAppMessage>
      <!-- 首页展示 -->
      <view class="page_content" :style="'margin-top:' + marTop + 'px;'" v-if="navIndex == 0">
        <view class="mp-bg"></view>
        <!-- banner -->
        <view class="swiper" v-if="imgUrls.length">
          <swiper
            indicator-dots="true"
            :autoplay="true"
            :circular="state.circular"
            :interval="state.interval"
            :duration="state.duration"
            indicator-color="rgba(255,255,255,0.6)"
            indicator-active-color="#fff"
          >
            <block v-for="(item, index) in imgUrls" :key="index">
              <swiper-item>
                <navigator
                  :url="item.url"
                  class="slide-navigator acea-row row-between-wrapper"
                  hover-class="none"
                >
                  <image :src="item.pic" class="slide-image" lazy-load></image>
                </navigator>
              </swiper-item>
            </block>
          </swiper>
        </view>
        <!-- 新闻简报 -->
        <view class="notice flex middle between" v-if="roll.length">
          <view class="pic">
            <image src="@/static/images/xinjian.png"></image>
          </view>
          <text class="line">|</text>
          <view class="swipers">
            <swiper
              :indicator-dots="false"
              :autoplay="true"
              interval="2500"
              duration="500"
              vertical="true"
              circular="true"
            >
              <block v-for="(item, index) in roll" :key="index">
                <swiper-item>
                  <navigator class="" :url="item.url" hover-class="none">
                    <view class="line1">{{ item.info }}</view>
                  </navigator>
                </swiper-item>
              </block>
            </swiper>
          </view>
          <view class="iconfont icon-xiangyou"></view>
        </view>
        <!-- menu -->
        <view class="nav flex wrap" v-if="menus.length">
          <view v-for="(item, index) in menus" class="item" :key="index">
            <view class="pictrue" @click="todetail(item)">
              <image :src="item.pic"></image>
            </view>
            <view class="menu-txt">{{ item.name }}</view>
          </view>
        </view>
        <!-- 优惠券 -->
        <view class="couponIndex" v-if="couponList.length > 0">
          <view class="flex wrap" style="height: 100%">
            <view class="titBox">
              <view class="tit1">领取优惠券</view>
              <view class="tit2">福利大礼包，省了又省</view>
              <navigator class="item" url="/pages/users/user_get_coupon/index" hover-class="none">
                <view class="tit3">查看全部 <text class="iconfont icon-xiangyou"></text></view>
              </navigator>
            </view>
            <view class="listBox flex wrap">
              <view
                class="list"
                :class="item.isUse ? 'listHui' : 'listActive'"
                v-for="(item, index) in couponList.slice(0, 2)"
                :key="index"
              >
                <view class="tit line1" :class="item.isUse ? 'pricehui' : 'titActive'">{{
                  item.name
                }}</view>
                <view class="price" :class="item.isUse ? 'pricehui' : 'icon-color'"
                  >{{ item.money ? Number(item.money) : '' }}<text class="yuan">元</text></view
                >
                <view
                  class="ling"
                  v-if="!item.isUse"
                  :class="item.isUse ? 'pricehui' : 'icon-color'"
                  @click="getCoupon(item.id, index)"
                  >领取</view
                >
                <view class="ling" v-else :class="item.isUse ? 'pricehui fonthui' : 'icon-color'"
                  >已领取</view
                >
                <view class="priceM">满{{ item.minPrice ? Number(item.minPrice) : '' }}元可用</view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <su-sticky bgColor="#fff" :customNavHeight="60">
        <su-tabs
          :list="explosiveMoney"
          :scrollable="true"
          @change="onTabsChange"
          :current="listActive"
        ></su-tabs>
      </su-sticky>
      <!-- 首发新品 -->
      <view class="index-product-wrapper">
        <view class="list-box animated" :class="tempArr.length > 0 ? 'fadeIn on' : ''">
          <view class="item" v-for="(item, index) in tempArr" :key="index" @click="goDetail(item)">
            <view class="pictrue">
              <span
                class="pictrue_log pictrue_log_class"
                v-if="item.activityH5 && item.activityH5.type === '1'"
                >秒杀</span
              >
              <span
                class="pictrue_log pictrue_log_class"
                v-if="item.activityH5 && item.activityH5.type === '2'"
                >砍价</span
              >
              <span
                class="pictrue_log pictrue_log_class"
                v-if="item.activityH5 && item.activityH5.type === '3'"
                >拼团</span
              >
              <image :src="item.image" mode=""></image>
            </view>
            <view class="text-info">
              <view class="title row1">{{ item.storeName }}</view>
              <view class="old-price"
                ><text>¥{{ item.otPrice }}</text></view
              >
              <view class="price">
                <text>￥</text>{{ item.price }}
                <view class="txt" v-if="item.checkCoupon">券</view>
              </view>
            </view>
          </view>
        </view>
        <view class="loadingicon acea-row row-center-wrapper" v-if="hasmore">
          <text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
        </view>
        <view class="mores-txt flex" v-if="!hasmore">
          <text>我是有底线的</text>
        </view>
      </view>
    </s-layout>
</template>

<script setup>
const navbar = {
  "mode": "inner",
  "alwaysShow": 1,
  "type": "image",
  "color": "#FF1700",
  "src": "/storage/default/20230831/7292b91d4868470dc70357d7a6d7c217.png",
  "list": {
    "mp": [
      {
        "width": 5,
        "height": 1,
        "top": 0,
        "left": 0,
        "type": "search",
        "text": "",
        "textColor": "#111111",
        "src": "",
        "url": "",
        "placeholder": "请输入关键字",
        "borderRadius": 20
      },
      {
        "width": 1,
        "height": 1,
        "top": 0,
        "left": 5,
        "type": "image",
        "text": "",
        "textColor": "#111111",
        "src": "/static/images/gift.png",
        "url": "/pages/coupon/list",
        "placeholder": "",
        "borderRadius": 0
      }
    ],
    "app": [
      {
        "width": 7,
        "height": 1,
        "top": 0,
        "left": 0,
        "type": "search",
        "text": "",
        "textColor": "#111111",
        "src": "",
        "url": "",
        "placeholder": "请输入关键字",
        "borderRadius": 23
      },
      {
        "width": 1,
        "height": 1,
        "top": 0,
        "left": 7,
        "type": "image",
        "text": "",
        "textColor": "#111111",
        "src": "/static/images/gift.png",
        "url": "/pages/coupon/list",
        "placeholder": "",
        "borderRadius": 0
      }
    ]
  }
}
const bgops = {
  "color": "#FF9237",
  "src": ""
}
  import { computed, reactive } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  import mall from '@/mall';
  import $share from '@/mall/platform/share';
  import { getIndexData, getCoupons, getGroomList } from '@/mall/api/home';
  import { goShopDetail } from '@/mall/utils/business.js';
	  import { showAuthModal } from '@/mall/hooks/useModal';
  // 隐藏原生tabBar
  uni.hideTabBar();
  const state = reactive({
    activeMenu: '0',
    circular: true,
    autoplay: true,
    interval: 3000,
    duration: 500,
    pagination: {
      page: 1,
      limit: 10,
    },
  });
  const template = computed(() => mall.$store('app').template?.home);
  const logoUrl = ref('');
  const imgUrls = ref([]);
  const menus = ref([]);
  const roll = ref([]);
  const couponList = ref([]);
  const explosiveMoney = ref([]);
  const tempArr = ref([]);
  const navIndex = ref(0);
  const marTop = ref(50);
  const listActive = ref(0);
  const window = ref(false);
  const iShidden = ref(true);
  const goodType = ref('');
  const indicatorDots = false;
  const configApi = ref({});
  const hasmore = ref(true);
   const loading = ref(false);
  const isLogin = computed(() => mall.$store('user').isLogin);
	  const uid = computed(() => mall.$store('user').uid);
  watchEffect(() => {
    if (listActive) {
      setTabList();
    }
  });
    uni.hideTabBar();
  async function setTabList() {
    await nextTick();
  }
  onLoad((options) => {
    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      mall.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      mall.$router.go(decodeURIComponent(options.page));
    }
    queryhome();
    getcouponList();
  });
  // 切换选项卡
  function onTabsChange(e) {
    state.pagination = {
      page: 1,
      limit: 10,
    };
    tempArr.value = [];
    listActive.value = e.index;
    goodType.value = e.type;
    hasmore.value = true;
    getGrooms();
  }
  function todetail(item) {
    uni.navigateTo({
      url: item.url,
    });
  }

function  tosearch(){
    mall.$router.go('/pages/index/search')
  }
  async function queryhome() {
    let { data } = await getIndexData();
    imgUrls.value = data.banner;
    menus.value = data.menus;
    roll.value = data.roll;
    explosiveMoney.value = data.explosiveMoney;
    goodType.value = data.explosiveMoney[0].type;
    getGrooms();
  }
  // 首发新品详情
  function goDetail(item) {
    if (item.activityH5 && item.activityH5.type === '2' && !this.isLogin) {
     showAuthModal('smsLogin')
    } else {
      goShopDetail(item, uid.value).then((res) => {
        uni.navigateTo({
          url: `/pages/goods/index?id=${item.id}`,
        });
      });
    }
  }
  async function getcouponList() {
    let { data } = await getCoupons({ page: 1, limit: 6 });
    couponList.value = data;
    // #ifdef MP
    uni.getSetting({
      success(res) {
        if (!res.authSetting['scope.userInfo']) {
          window.value = data.length ? true : false;
        } else {
          window.value = false;
          iShidden.value = true;
        }
      },
    });
    // #endif
    // #ifndef MP
    if (isLogin) {
      window.value = false;
    } else {
      window.value = data.length ? true : false;
    }
    // #endif
  }
  async function getGrooms(params) {
    if (!hasmore.value) return;
    let { data } = await getGroomList(goodType.value, state.pagination);
    state.pagination.page++;
    tempArr.value = tempArr.value.concat(data.list);
    hasmore.value = tempArr.value.length >= state.pagination.limit;
  }
  // 下拉刷新
  onPullDownRefresh(() => {
    mall.$store('app').init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<style lang="scss" scoped>
  .nav {
    padding-bottom: 26rpx;
    background: #fff;
    opacity: 1;
    border-radius: 14rpx;
    width: 100%;
    margin-bottom: 30rpx;
    box-sizing: border-box;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 30rpx;

      image {
        width: 82rpx;
        height: 82rpx;
      }
    }
  }
  .menu-txt {
    font-size: 24rpx;
    color: #454545;
  }
  .notice {
    width: 100%;
    height: 70rpx;
    border-radius: 10rpx;
    background-color: #fff;
    margin-bottom: 25rpx;
    line-height: 70rpx;
    padding: 0 14rpx;
    .line {
      color: #cccccc;
    }
    .pic {
      width: 130rpx;
      height: 36rpx;
      image {
        width: 100%;
        height: 100%;
        display: block !important;
      }
    }
    .swipers {
      height: 100%;
      width: 444rpx;
      overflow: hidden;
      swiper {
        height: 100%;
        width: 100%;
        overflow: hidden;
        font-size: 22rpx;
        color: #333333;
      }
    }
    .iconfont {
      color: #999999;
      font-size: 20rpx;
    }
  }
  .couponIndex {
    width: auto;
    height: 238rpx;
    background-image: url('~@/static/images/yhjsy.png');
    background-size: 100% 100%;
    padding-left: 42rpx;
    margin-bottom: 30rpx;

    .titBox {
      padding: 47rpx 0;
      text-align: center;
      height: 100%;

      .tit1 {
        color: #ffebd2;
        font-size: 34rpx;
        font-weight: 600;
      }

      .tit2 {
        color: #ffebd2;
        font-size: 22rpx;
        margin: 10rpx 0 26rpx 0;
      }

      .tit3 {
        color: #ffdaaf;
        font-size: 24rpx;
        .iconfont {
          font-size: 20rpx;
        }
      }
    }

    .listBox {
      padding: 14rpx 0;

      .listActive {
        background-image: url('~@/static/images/lingyhj.png');
        background-size: 100% 100%;
      }

      .listHui {
        background-image: url('~@/static/images/weiling.png');
        background-size: 100% 100%;
      }

      .list {
        width: 170rpx;
        height: 210rpx;
        padding: 16rpx 0;
        box-sizing: border-box;
        text-align: center;
        margin-left: 24rpx;

        .tit {
          font-size: 18rpx;
          padding: 0 26rpx;
        }

        .titActive {
          color: #c99959;
        }

        .price {
          font-size: 46rpx;
          font-weight: 900;
          margin-top: 4rpx;
        }

        .pricehui {
          color: #b2b2b2;
        }
        .fonthui {
          background-color: #f5f5f5 !important;
        }
        .yuan {
          font-size: 24rpx;
        }

        .ling {
          font-size: 24rpx;
          margin-top: 9.5rpx;
          width: 102rpx;
          height: 36rpx;
          line-height: 36rpx;
          background-color: #ffe5c7;
          border-radius: 28rpx;
          margin: auto;
        }

        .priceM {
          color: #ffdaaf;
          font-size: 22rpx;
          margin-top: 14rpx;
        }
      }
    }
  }
  .page-index {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: linear-gradient(180deg, #fff 0%, #f5f5f5 100%);

    .header {
      width: 100%;
      background-color: $theme-color;
      padding: 28rpx 30rpx;
      box-sizing: border-box;
      .serch-wrapper {
        align-items: center;

        .logo {
          width: 50rpx;
          height: 50rpx;
          margin-right: 10rpx;
        }
        .input {
          display: flex;
          align-items: center;
          width: 546rpx;
          height: 58rpx;
          padding: 0 0 0 30rpx;
          background: rgba(247, 247, 247, 1);
          border: 1px solid rgba(241, 241, 241, 1);
          border-radius: 29rpx;
          color: #bbbbbb;
          font-size: 26rpx;

          .iconfont {
            margin-right: 20rpx;
            font-size: 26rpx;
            color: #666666;
          }
        }
      }

      .tabNav {
        padding-top: 24rpx;
      }
    }

    /* #ifdef MP */
    .mp-header {
      z-index: 999;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      /* #ifdef H5 */
      padding-bottom: 20rpx;
      /* #endif */
      background-color: $theme-color;

      .serch-wrapper {
        height: 100%;
        align-items: center;
        padding: 0 50rpx 0 53rpx;

        image {
          width: 118rpx;
          height: 42rpx;
          margin-right: 30rpx;
        }

        .input {
          display: flex;
          align-items: center;
          /* #ifdef MP */
          width: 305rpx;
          /* #endif */
          height: 50rpx;
          padding: 0 0 0 30rpx;
          background: rgba(247, 247, 247, 1);
          border: 1px solid rgba(241, 241, 241, 1);
          border-radius: 29rpx;
          color: #bbbbbb;
          font-size: 28rpx;

          .iconfont {
            margin-right: 20rpx;
          }
        }
      }
    }

    /* #endif */

    .page_content {
      background-color: #f5f5f5;
      /* #ifdef H5 */
      // margin-top: 20rpx !important;
      /* #endif */
      padding: 0 30rpx;

      .swiper {
        position: relative;
        width: 100%;
        height: 280rpx;
        margin: 0 auto;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 25rpx;
        /* #ifdef MP */
        z-index: 10;
        margin-top: 20rpx;

        /* #endif */
        swiper,
        .swiper-item,
        image {
          width: 100%;
          height: 280rpx;
          border-radius: 10rpx;
        }
      }

      .nav {
        padding-bottom: 26rpx;
        background: #fff;
        opacity: 1;
        border-radius: 14rpx;
        width: 100%;
        margin-bottom: 30rpx;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 20%;
          margin-top: 30rpx;

          image {
            width: 82rpx;
            height: 82rpx;
          }
        }
      }

      .nav-bd {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .txt {
            font-size: 32rpx;
            color: #282828;
          }

          .label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 124rpx;
            height: 32rpx;
            margin-top: 5rpx;
            font-size: 24rpx;
            color: #999;
          }

          &.active {
            color: $theme-color;

            .txt {
              color: $theme-color;
            }

            .label {
              background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
              border-radius: 16rpx;
              color: #fff;
            }
          }
        }
      }
    }
  }
  .index-product-wrapper {
    margin-bottom: 110rpx;

    &.on {
      min-height: 1500rpx;
    }

    .list-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 30rpx;
      .item {
        width: 335rpx;
        margin-bottom: 20rpx;
        background-color: #fff;
        border-radius: 10rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 330rpx;
        }

        .text-info {
          padding: 10rpx 20rpx 15rpx;

          .title {
            color: #222222;
          }

          .old-price {
            margin-top: 8rpx;
            font-size: 26rpx;
            color: #aaaaaa;
            text-decoration: line-through;

            text {
              margin-right: 2px;
              font-size: 20rpx;
            }
          }

          .price {
            display: flex;
            align-items: flex-end;
            color: $theme-color;
            font-size: 34rpx;
            font-weight: 800;

            text {
              padding-bottom: 4rpx;
              font-size: 24rpx;
              font-weight: 800;
            }

            .txt {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 28rpx;
              height: 28rpx;
              margin-left: 15rpx;
              margin-bottom: 10rpx;
              border: 1px solid $theme-color;
              border-radius: 4rpx;
              font-size: 22rpx;
              font-weight: normal;
            }
          }
        }
      }

      &.on {
        display: flex;
      }
    }
  }
  .mores-txt {
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 70rpx;
    color: #999;
    font-size: 24rpx;

    .iconfont {
      margin-top: 2rpx;
      font-size: 20rpx;
    }
  }
</style>
